<style type="text/css">
    .form-box {
        padding: 20px 20px 0 0;
    }

    .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <table class="layui-hide" id="data-table" lay-filter="dataTable"></table>
</div>
<script id="item-form" type="text/html">
    <div class="form-box">
        <form id="form-item" lay-filter="formItem" class="layui-form">
            <input type="hidden" name="id" value="{{ d.id || '' }}"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="uname" lay-verify="required" placeholder="用户名"
                           class="layui-input" value="{{ d.uname || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realName" lay-verify="required" placeholder="姓名"
                           class="layui-input" value="{{ d.realName || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">角色</label>
                <div class="layui-input-block">
                    <select name="roleId" lay-verify="required">
                        <option value=""></option>
                        {{# layui.each(d.roles, function(index, item) { }}
                        <option value="{{ item.id }}" {{ d.roleId=== item.id ?
                        'selected' : '' }}>{{ item.roleName }}</option>
                        {{# }); }}
                    </select>
                </div>
            </div>
        </form>
    </div>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="openDialog">添加</button>
    </div>
</script>
<script type="text/html" id="tablebarDemo">
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteRow">删除</button>
    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="openDialog">编辑</button>
</script>
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'table', 'laytpl', 'util'], function () {
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;
        let util = layui.util;

        let tableIns = table.render({
            elem: '#data-table',
            url: api.pageUsers,
            method: 'post',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: 'ID', width: 180},
                {field: 'uname', title: '登录用户名', width: 150},
                {field: 'realName', title: '姓名'},
                {field: 'roleName', title: '角色', width: 180},
                {field: 'createName', title: '创建人名称', width: 200},
                {field: 'createTime', title: '创建时间', width: 240},
                {field: '', width: 120, title: '操作', templet: '#tablebarDemo'}
            ]
            ],
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            },
            toolbar: '#toolbarDemo'
        });

        let active = {
            openDialog: function (data) {
                if (!data) {
                    data = {};
                }
                request.bodyAjax(api.listRoles, {}, function (res) {
                    if (res.success) {
                        data.roles = res.data;
                        let tpl = document.getElementById("item-form").innerHTML;
                        laytpl(tpl).render(data, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: (data.id ? '编辑' : '增加') + '用户',
                                area: ['435px', '300px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['确定', '取消'],
                                yes: function (index, layero) {
                                    let load = layer.load();
                                    request.bodyAjax(api.saveUser, form.val('formItem'), function (res) {
                                        layer.close(load);
                                        if (res.status === 200) {
                                            tableIns.reload();
                                        }
                                        layer.close(index);
                                        layer.msg(res.message);
                                    });
                                    return false;
                                }
                            });
                        });
                        return form.render();
                    }
                });
            },
            deleteRow: function (data) {
                layer.confirm('确定删除[' + data.realName + ']吗 ？', {
                    icon: 3,
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        layer.close(index);
                        layer.msg('正在操作, 请稍后......', {shade: 0.01, time: 0});
                        request.bodyAjax(api.deleteUser, {id: data.id}, function (res) {
                            if (res.success) {
                                tableIns.reload();
                            }
                            layer.msg(res.message, {icon: res.iconType});
                        });
                    }
                });
            }
        };

        // layui的btn单独添加点击事件
        util.event('lay-active', active);

        // 表头按钮
        table.on('toolbar(dataTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });

        // 操作列
        table.on('tool(dataTable)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });
    })
    ;
</script>
